<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] transitionPanel h-full animate__fadeInRight relative animate__animated"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 py-[50px] pr-[10px]"
      >
        <!--          应急事件分类-->
        <base-card class="flex-1 overflow-hidden" title="应急事件分类">
          <template #rightTitle>
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              v-model:value="timeRange"
              @change="changeTime"
            ></a-range-picker>
          </template>
          <base-chart
            :options="bottomOption1"
            v-if="bottomTab == 0"
          ></base-chart>
        </base-card>
        <!--          应急事件数量分析-->
        <base-card class="flex-1 overflow-hidden" title="应急事件数量分析">
          <BaseChart :options="topOption"></BaseChart>
        </base-card>
        <!--          车辆通行分析-->
        <base-card class="flex-1 overflow-hidden" title="应急事件列表">
          <base-table
            :show-tool="false"
            :column="column"
            :data-source="tableData"
            :show-pagination="false"
            class="reset-table"
          >
            <template #startTime="scope">
              {{ parseTime1(scope) }}
            </template>
          </base-table>
        </base-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import { ref, onMounted } from "vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { CommonEchartLegend, parseTime1 } from "@/utils/index.js";
import BaseTable from "@/components/three/component/baseTable/index.jsx";
import { dayjs } from "element-plus";
import { getHKEventsSearch } from "@/api/dataScreen/dataScreen.js";

const topOption = ref({
  grid: {
    left: "12%",
    top: "5%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "rgba(255,255,255,0.8)",
      },
    },
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: [],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      type: "line",
      smooth: true,
      barWidth: 40,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [],
    },
  ],
});
// let dataMap1 = {
//   一般事件: {
//     value: 10,
//     percent: "25%",
//   },
//   较大事件: {
//     value: 10,
//     percent: "25%",
//   },
//   重大事件: {
//     value: 10,
//     percent: "25%",
//   },
//   特大事件: {
//     value: 10,
//     percent: "25%",
//   },
// };
const changeBottomTab = (tab) => {
  bottomTab.value = tab;
};
const eventCategory = ref({});
const bottomOption1 = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "一般事件",
      top: "40%",
      left: "25%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
    {
      text: "事件类型",
      top: "50%",
      left: "22%",
      padding: [0, 0, 0, -15],
      textStyle: {
        color: "#50a8e3",
        fontSize: 12,
        fontWeight: "400",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      let value =
        name == "一般事件"
          ? eventCategory.value?.generalEvent || 0
          : name == "较大事件"
            ? eventCategory.value?.majorEvent || 0
            : eventCategory.value?.specialEvent || 0;
      return `${name}  ${value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: [
        {
          value: 0,
          name: "一般事件",
          itemStyle: {
            color: "#a0ffeb",
          },
        },
        {
          value: 0,
          name: "较大事件",
          itemStyle: {
            color: "#798bd7",
          },
        },
        {
          value: 0,
          name: "重大事件",
          itemStyle: {
            color: "#6387f5",
          },
        },
      ],
    },
  ],
});
// const bottomOption2 = ref({
//   backgroundColor: "rgba(0,0,0,0)",
//   title: [
//     {
//       text: "一般事件",
//       top: "40%",
//       left: "25%",
//       padding: [0, 0, 0, -20],
//       textStyle: {
//         color: "#3FAA90",
//         fontSize: 14,
//         fontWeight: "bold",
//       },
//     },
//     {
//       text: "应急事件类型",
//       top: "50%",
//       left: "22%",
//       padding: [0, 0, 0, -15],
//       textStyle: {
//         color: "#50a8e3",
//         fontSize: 12,
//         fontWeight: "400",
//       },
//     },
//   ],
//   tooltip: {
//     show: false,
//     trigger: "item",
//   },
//   legend: {
//     ...CommonEchartLegend,
//     orient: "vertical",
//     right: "5%",
//     top: "middle",
//     formatter: (name) => {
//       return `${name}  ${dataMap1[name].value}`;
//     },
//   },
//   series: [
//     {
//       type: "pie",
//       radius: ["45%", "65%"],
//       center: ["28%", "50%"],
//       label: {
//         show: false,
//       },
//       data: ser_data1,
//     },
//   ],
// });
const bottomTab = ref(0);
onMounted(() => {
  changeTime();
});
const column = ref([
  {
    dataIndex: "locationName",
    align: "center",
    key: "locationName",
    label: "告警位置",
  },
  {
    dataIndex: "resName",
    align: "center",
    key: "resName",
    label: "事件名称",
  },
  {
    dataIndex: "eventTypeName",
    align: "center",
    key: "eventTypeName",
    label: "事件类型",
  },
  {
    dataIndex: "startTime",
    align: "center",
    width: "200px",
    key: "startTime",
    label: "时间",
    scopedSlots: { customRender: "startTime" },
  },
]);
const tableData = ref([]);
const timeRange = ref([dayjs().subtract(30, "days"), dayjs()]);

const changeTime = () => {
  //TOP
  if (timeRange.value.length > 1) {
    getHKEventsSearch({
      startTime: timeRange.value[0],
      endTime: timeRange.value[1],
    }).then((res) => {
      eventCategory.value = res.data.eventCategory || {};
      bottomOption1.value.series[0].data[0].value =
        res.data.eventCategory?.generalEvent || 0;
      bottomOption1.value.series[0].data[1].value =
        res.data.eventCategory?.majorEvent || 0;
      bottomOption1.value.series[0].data[2].value =
        res.data.eventCategory?.specialEvent || 0;
      //table
      tableData.value =
        (res.data.evenLists || [])?.map((item) => {
          return {
            ...item,
            startTime: item.startTime
              ? dayjs(item.startTime).format("YYYY-MM-DD HH:mm")
              : null,
          };
        }) || [];
      //dayTotal
      topOption.value.xAxis.data =
        res.data.dayTotal.map((item) => {
          return item.time;
        }) || [];
      topOption.value.series[0].data =
        res.data.dayTotal.map((item) => {
          return item.total;
        }) || [];
    });
  }
};
</script>
<style scoped lang="less">
.transitionPanel {
  transition:
    right 0.7s ease-in-out,
    width 1s ease-in-out,
    opacity 0.7s ease-in-out;
}

.showPanel {
  opacity: 1;
  right: 0;
  //width: 100%;
}

.hidePanel {
  opacity: 0;
  //width: 0%;
  right: -120%;
}

.opt {
  transition:
    right 0.7s ease-in-out,
    left 0.7s ease-in-out;
}

.optToLeft {
  right: 0px;
}

.optToRight {
  right: 360px;
}

:deep(.ant-progress-text) {
  color: #fff;
  font-size: 12px;
}

/* 适配深色背景的 a-range-picker 样式 */
::v-deep(.ant-picker) {
  background-color: transparent; /* 深色背景 */
  color: #fff; /* 白色字体 */
  border-color: #ccc; /* 深色边框 */
}

::v-deep(.ant-picker:hover) {
  border-color: #ccc; /* 悬停时边框颜色 */
}

::v-deep(.ant-picker-input > input) {
  color: #ccc; /* 输入框字体颜色 */
}

::v-deep(.ant-picker-input > input::placeholder) {
  color: #fff;
}

::v-deep(.ant-picker-range-separator) {
  color: #aaa; /* 分隔符颜色 */
}

::v-deep(.ant-picker-dropdown) {
  background-color: #222;
  color: #fff;
}

::v-deep(.ant-picker-dropdown .ant-picker-cell) {
  color: #ccc;
}

::v-deep(.ant-picker-dropdown .ant-picker-cell-in-view) {
  color: #fff;
}

::v-deep(
  .ant-picker-dropdown .ant-picker-cell-today .ant-picker-cell-inner::before
) {
  border-color: #fff;
}

::v-deep(
  .ant-picker-dropdown .ant-picker-cell-selected .ant-picker-cell-inner
) {
  background-color: #555;
  color: #fff;
}

::v-deep(.ant-picker-clear) {
  color: #ccc;
}

::v-deep(.ant-picker-suffix) {
  color: #ccc;
}
</style>
